<template>
    <div class="home">
        <!-- Canvas雪花背景 -->
        <SnowCanvas />
        <Announcement></Announcement>
        <video
            class="bg-video"
            ref="bgVideoRef"
            :src="currentVideo"
            autoplay
            loop
            muted
        ></video>
        <div class="picture">
            <div
                :style="{
                    position: 'absolute',
                    inset: 0,
                    background: `url('${PageAssets.homeCanvasBg}') center no-repeat`,
                    backgroundSize: '100% 100%',
                    opacity: 0.3,
                    zIndex: 1,
                    pointerEvents: 'none',
                }"
            ></div>
            <BigCanvas
                :cards="cards"
                :zoomedArr="zoomedArr"
                @zoom="handleZoom"
            />
        </div>
        <img class="logo-img" :src="PageAssets.homeYYSLSlogo" alt="logo" />
        <div class="logo-text">
            <img
                class="logo-text-img"
                :src="PageAssets.homeOrganizeLogo"
                alt="风华无缺"
            />
            <img
                class="logo-text-bg-top"
                src="https://zkaicc.huilan.com/aicc/api/aicc-file/miniofile/preViewPicture/aicc/qdqqd_1761320525207.png"
                alt="祥云1"
            />
            <img
                class="logo-text-bg-top-left"
                src="https://file.zhuyitai.com/feedback/202510/24/5ed3ea40c0419436408af78e087ff9ba.png"
                alt="祥云1"
            />
            <img
                class="logo-text-bg-top-right"
                src="https://cdn.jsdelivr.net.cn/gh/qdqqd/url-core@A/tc_uploads/xekosq4hom.png"
                alt="祥云1"
            />
            <img
                class="logo-text-bg-bottom-right"
                src="https://www.yn12377.cn/jubao/upload/smjb/2025/10/24/2e873762cf8a44b3bcfa041fc8a8855c.png"
                alt="祥云1"
            />
            <img
                class="logo-text-bg-bottom-left"
                src="https://e3f49eaa46b57.cdn.sohucs.com/2025/10/24/23/43/MTAwMTE0XzE3NjEzMjA2MzEyODM=.png"
                alt="祥云1"
            />
            <img
                class="logo-text-bg-bottom"
                src="https://file.zhuyitai.com/feedback/202510/24/7608993428d9fcf4b6f03f78031875a9.png"
                alt="祥云1"
            />
        </div>
        <div class="bottom-tip">
            <img
                src="https://kycloud4.koyoo.cn/2025102470b87202510242338561237.png"
                alt=""
            />
        </div>
        <navigationBig :top="'0px'" :right="'1%'" />
    </div>
</template>

<script setup>
import SnowCanvas from "@/components/SnowCanvas.vue";
import BigCanvas from "@/components/BigCanvas.vue";
import navigationBig from "@/components/navigationBig.vue";
import Announcement from "@/components/Announcement.vue";
// import cards from "./Home-data.js";
import { getHomeData, getPageAssets } from "./api";
import { useRouter } from "vue-router";
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
const router = useRouter();
function handleWheel(e) {
    if (e.deltaY > 0) {
        router.push("/video-player");
    }
}
const cards = ref([]);
const PageAssets = ref("");
const currentVideo = ref("");
const zoomed = ref(false);
// 默认播放cards第一条视频
const bgVideoRef = ref(null); // video元素引用

// 监听 cards，自动设置 currentVideo
watch(
    () => cards.value,
    (newCards) => {
        if (newCards.length > 0) {
            currentVideo.value = newCards[0].video || "";
        }
    },
    { immediate: true }
);

// 2. zoomed 状态数组，自动与卡片数量同步
const zoomedArr = ref(Array(cards.value.length).fill(false));

// 3. 如果卡片数量会动态变化，建议 watch cards 自动同步 zoomedArr 长度
watch(
    () => cards.value.length,
    (len) => {
        if (zoomedArr.value.length < len) {
            zoomedArr.value.push(
                ...Array(len - zoomedArr.value.length).fill(false)
            );
        } else if (zoomedArr.value.length > len) {
            zoomedArr.value.length = len;
        }
    }
);
function handleZoom({ val, idx }) {
    zoomedArr.value[idx] = val;
    // 只有鼠标移到新图片时才切换视频，离开时不清空
    // 只有鼠标移到新图片且视频链接不同才切换
    if (val && currentVideo.value !== cards.value[idx].video) {
        currentVideo.value = cards.value[idx].video;
        nextTick(() => {
            if (bgVideoRef.value) {
                bgVideoRef.value.currentTime = 0;
                bgVideoRef.value.play();
            }
        });
    }
}
onMounted(async () => {
    window.addEventListener("wheel", handleWheel);
    try {
        const data = await getHomeData();
        cards.value = data;
    } catch (e) {
        console.error("获取卡片数据失败", e);
    }
    PageAssets.value = await getPageAssets();
});
onUnmounted(() => {
    window.removeEventListener("wheel", handleWheel);
});
</script>

<style lang="scss" scoped>
.home {
    position: relative;
    width: 100%;
    height: 100%;
    // background: url('/assets/白色上下边缘.png') center center/cover no-repeat, #262626;
    background-color: #262626;
    .bg-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }
    .picture {
        // border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 75rem;
        height: 68.75rem;
        box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 1), 0 1.5rem 3rem #0004;
        background-color: rgba(255, 255, 255, 0.01);
        // 模糊
        backdrop-filter: blur(12px);
        overflow: hidden;
        z-index: 100;
        mask-image: radial-gradient(
            ellipse at 50% 50%,
            rgba(0, 0, 0, 1) 60%,
            transparent 70%
        );
    }
    .logo-img {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
        width: 40rem;
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 10%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.1) 90%,
            transparent 100%
        );
        z-index: 100;
        pointer-events: none;
    }
    .logo-text {
        position: relative;
        left: 50%;
        top: 3.5%;
        width: 25rem;
        transform: translate(-50%, 0);
        z-index: 100;
        .logo-text-img {
            width: 100%;
            object-fit: contain;
            mask-image: radial-gradient(
                ellipse at 50% 50%,
                rgba(0, 0, 0, 1) 40%,
                transparent 100%
            );
            opacity: 0.8;
        }
        .logo-text-bg-top {
            position: absolute;
            left: 0;
            top: -1rem;
            width: 25rem;
            object-fit: contain;
        }
        .logo-text-bg-top-left {
            position: absolute;
            left: -2rem;
            top: -2rem;
            width: 6rem;
            height: 6rem;
            object-fit: contain;
        }
        .logo-text-bg-top-right {
            position: absolute;
            right: -2rem;
            top: -2rem;
            width: 6rem;
            height: 6rem;
            object-fit: contain;
        }
        .logo-text-bg-bottom-right {
            position: absolute;
            right: -2rem;
            bottom: -2rem;
            width: 6rem;
            height: 6rem;
            object-fit: contain;
        }
        .logo-text-bg-bottom-left {
            position: absolute;
            left: -2rem;
            bottom: -2rem;
            width: 6rem;
            height: 6rem;
            object-fit: contain;
        }
        .logo-text-bg-bottom {
            position: absolute;
            left: 0;
            bottom: -1rem;
            width: 25rem;
            object-fit: contain;
        }
    }
    .bottom-tip {
        position: absolute;
        left: 50%;
        bottom: 1rem;
        transform: translate(-50%, 0);
        width: 12rem;
        img {
            display: block;
            width: 100%;
            animation: floatY 5s infinite ease-in-out;
        }
    }
}
@keyframes floatY {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-8px);
    }
    40% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(-8px);
    }
    80% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
    }
}
</style>
